<template>
	<div class="cs-container">
		<div class="cs-title clear">
			<div class="left">接口管理</div>
			<div class="right"></div>
		</div>
		<div class="cs-content cs-table">
			<div class="form-tool">
				<el-form :inline="true" :model="form" size="mini">
					<el-form-item label="接口名称">
						<el-input v-model="form.name" placeholder="请输入接口名称" />
					</el-form-item>
					<el-form-item label="接口地址">
						<el-input v-model="form.uri" placeholder="请输入" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="mini" @click="query">查询</el-button>
						<el-button size="mini" @click="reset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="data-table">
				<el-table :data="tableData" height="calc(100% - 60px)" style="width: 100%;" 
				 	element-loading-text="加载中..." v-loading="loading">
					<el-table-column prop="index" label="序号" width="50" align="center"></el-table-column>
					<el-table-column prop="name" label="接口名称" width="170" align="left"></el-table-column>
					<el-table-column prop="description" label="描述" width="150"></el-table-column>
					<el-table-column label="接口地址" >
						<template slot-scope="scope">
							<el-link :href="scope.row.URL"  type="primary" :underline="false"
							target="_blank" style="font-size: 12px;">{{scope.row.uri}}</el-link>
						</template>
					</el-table-column>
					<el-table-column label="请求方式" width="120">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.method === 'GET'" size="mini">{{scope.row.method}}</el-tag>
							<el-tag v-else type="warning" size="mini">{{scope.row.method}}</el-tag>
						</template>	
					</el-table-column>
					<el-table-column prop="index" label="调用次数" width="90"></el-table-column>
					
					<el-table-column prop="create_time" label="发布时间" width="150"></el-table-column>
					<el-table-column prop="update_time" label="更新时间" width="150"></el-table-column>
					<el-table-column label="操作" width="100">
						<template slot-scope="scope" >
							<el-link type="primary" :underline="false" @click="query(scope.row)">查看</el-link>
							<el-link type="primary" :underline="false" class="cs-margin-l-7">编辑</el-link>
						</template>
					</el-table-column>
				</el-table>	

				<!-- 分页 -->
				<div class="cs-pagination">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagination.currentPage"
						:page-sizes="pagination.pageSizes"
						:page-size="pagination.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total">
						</el-pagination>
				</div> 
			</div>
		</div>
	</div>
</template>

<script>
 	// import { getURL} from '@/plugins/api/common'
	const getURL = {};
	export default {
		name: 'ui',	
		data() {
			return {
				form: {},
				tableData: [],
				loading: false,
				pagination: {
					currentPage: 1,
					pageSizes: [10, 20, 30, 40, 50, 100],
					pageSize: 10,
					total: 0,	
				}
			}
		},
		mounted() {
			this.loadData();
		},
		methods: {
			/**
			 * 查询
			 */
			query() {
				this.pagination.currentPage = 1;
				this.loadData();
			},

			/**
			 * 重置
			 */
			reset() {
				this.form = {};
				this.loadData();
			},

			/**
			 * 加载数据
			 */
			loadData() {
				this.loading = true;
				getURL({
					needPage: true,
					currentPage: this.pagination.currentPage,
					pageSize: this.pagination.pageSize,
					querydata: JSON.stringify([
						{key:"name",value: this.form.name},
	 					{key:"uri", value: this.form.uri},
					])
				}).then(response => {
					this.loading = false;
					this.tableData = [];
					this.pagination.total = response.total;
					response.rows.forEach((item, index_) => {
						item.index = ((this.pagination.currentPage - 1) * this.pagination.pageSize) + index_ + 1;
						item.URL= item.uri;
						item.create_time = this.$utils.formatter.moment(item.create_time).format('YYYY-MM-DD HH:mm:ss');
						item.update_time = this.$utils.formatter.moment(item.update_time).format('YYYY-MM-DD HH:mm:ss');
						this.tableData.push(item);
					});
				});
			},

			/**
			 * 每页多少条
			 */
			handleSizeChange(val) {
				this.pagination.currentPage = 1;
				this.pagination.pageSize = val;
				this.loadData();
			},

			/**
			 * 下一页
			 */
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.loadData();
			},
		}
	}
</script>

<style>

</style>